<template>
  <div>
    <!-- 列表懒加载 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
      class="Category-lists"
    >
      <ul>
        <li v-for="item in Categorylist" :key="item.id" @click="godetailaction(item.id)">
          <img :src="item.scene_pic_url" alt="" />
          <p class="Category-t">{{ item.title }}</p>
          <p class="Category-c">{{ item.subtitle }}</p>
          <p class="Category-b">{{ item.price_info }}元起</p>
        </li>
      </ul>
    </van-list>
    <div class="p"></div>
    <!-- 页脚 -->
    <van-tabbar route>
      <!-- replace 跳转是否替换当前页面 -->
      <!-- to 跳转路由 -->
      <van-tabbar-item replace to="/home" icon="wap-home-o"
        >首页</van-tabbar-item
      >
      <van-tabbar-item replace to="/topic" icon="description"
        >专题</van-tabbar-item
      >
      <van-tabbar-item replace to="/category" icon="apps-o">分类</van-tabbar-item>
      <van-tabbar-item replace to="/cart" icon="shopping-cart-o"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item replace to="/my" icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { listaction } from "@/api/topic/index.js";
export default {
  data() {
    return {
      // 请求过来的参数列表
      Categorylist: [],
      loading: false,
      finished: false,
      start: 1,
    };
  },
  methods: {
    // 列表事件
    onLoad() {
      this.getCategory();
    },
    getCategory() {
      listaction({
        page: this.start,
      }).then((res) => {
        console.log(res);
        this.Categorylist.push(...res.data);
        this.start++;
        if (this.start > res.total) {
          this.finished = true;
        }
        this.loading = false;
      });
    },
    godetailaction(key){
      console.log(key)
      var Id=key;
      localStorage.setItem('Id',Id)
      this.$router.push({name:'detailaction'})
    }
  },
  created() {
    this.getCategory();
  },
};
</script>
<style lang="scss" scoped>
.Category-lists {
  background-color: #f4f4f4;
  ul {
    width: 100%;

    li {
      width: 100%;
      height: 330px;
      background-color: #fff;
      margin-bottom: 10px;
      img {
        width: 100%;
        height: 60%;
      }
      p {
        text-align: center;
        padding: 0 10px;
      }
      .Category-t {
        font-size: 16px;
      }
      .Category-c {
        color: #999;
      }
      .Category-b {
        color: #b4282d;
      }
    }
  }
}

.p {
  height: 50px;
  background-color: #f4f4f4;
}
</style>